import React, { Component } from 'react';
import { StyleSheet, View, ScrollView, Text } from 'react-native';

import { SafeAreaView } from 'react-navigation';
import BaseStyle from '../constants/Style';
import { Tabs, Modal, WhiteSpace, WingBlank } from 'antd-mobile-rn';

export default class RadioScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
     
    };
  }

  render() {
    const tabs = [
      { title: 'First Tab' },
      { title: 'Second Tab' },
      { title: 'Third Tab' },
    ];
    const tabs2 = [
      { title: '1st Tab' },
      { title: '2nd Tab' },
      { title: '3rd Tab' },
      { title: '4th Tab' },
      { title: '5th Tab' },
      // { title: '6th Tab' },
      // { title: '7th Tab' },
      // { title: '8th Tab' },
      // { title: '9th Tab' },
    ];
    const style = {
      alignItems: 'center',
      justifyContent: 'center',
      height: 150,
      backgroundColor: '#fff',
    }
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <View style={{ flex: 1 }}>
          <Tabs tabs={tabs}>
            <View style={style}>
              <Text>Content of First Tab</Text>
            </View>
            <View style={style}>
              <Text>Content of Second Tab</Text>
            </View>
            <View style={style}>
              <Text>Content of Third Tab</Text>
            </View>
          </Tabs>
          <View style={{ flex: 2 }}>
            <Tabs tabs={tabs2} initialPage={1} tabBarPosition="top">
            <View style={style}>
              <Text>Content of 1 Tab</Text>
            </View>
            <View style={style}>
              <Text>Content of 2 Tab</Text>
            </View>
            <View style={style}>
              <Text>Content of 3 Tab</Text>
            </View>
            <View style={style}>
              <Text>Content of 4 Tab</Text>
            </View>
            <View style={style}>
              <Text>Content of 5 Tab</Text>
            </View>
            </Tabs>
          </View>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 20,
    paddingLeft: 30,
  },
  radView: {
    marginTop: 20,
  },
});
